import React, { useEffect, useState } from 'react'
import { useAppDispatch, useAppSelector } from '../../app/hooks'
import { ListItem } from '../../components'
import { Checkbox, Stepper, Dialog, Notify, SwipeCell, Button, SubmitBar, NavBar } from 'react-vant'
import { addCartList, deleteCarList, deleteSelectedCartList, subCartList, switchState, totalSwitchState } from '../../features/cart'
import { useCart } from '../../hooks'
import { useNavigate } from 'react-router-dom'

const Cart: React.FC = () => {
  // 获取 hooks
  const dispatch = useAppDispatch()
  const navigate = useNavigate()
  const { totalState, totalPrice } = useCart()
  // 购物车数据
  const cartList = useAppSelector(state => state.cart.cartList)
  // 编辑状态
  const [isEdit, setIsEdit] = useState(false)
  return (
    <div>
      <NavBar title="购物车" rightText={isEdit ? '完成' : '管理'}
        onClickLeft={() => navigate(-1)}
        onClickRight={() => setIsEdit(!isEdit)}
      ></NavBar>
      <div>
        {
          cartList.map((v, i) => {
            return <SwipeCell key={i} rightAction={
              <Button style={{ height: '100%' }} square type="danger" onClick={() => dispatch(deleteCarList(v))}>
                删除
              </Button>
            }>
              <ListItem
                v={v}
                preLeft={<Checkbox checked={v.state} onChange={() => dispatch(switchState(v))}></Checkbox>}
                desc={
                  <>
                    <Stepper
                      value={v.count}
                      min={1}
                      max={v.maxCount}
                      onPlus={() => dispatch(addCartList(v))}
                      onMinus={() => dispatch(subCartList(v))}
                      onOverlimit={() => {
                        // 判断边界
                        if (v.count === 1) {
                          Dialog.confirm({
                            title: '警告',
                            message: '在减少就要删除了！！！'
                          }).then(() => {
                            // 确定
                            dispatch(deleteCarList(v))
                          }).catch(() => { })
                        } else if (v.count === v.maxCount) {
                          Notify.show({ type: 'danger', message: '以达到库存上限' })
                        }
                      }}
                    ></Stepper>
                    <h4 style={{ color: 'red' }}>¥: {v.price}</h4>
                  </>
                }
              ></ListItem>
            </SwipeCell>
          })
        }
      </div>
      {
        isEdit
          ? (<div style={{
            position: 'fixed',
            left: 0,
            bottom: 0,
            width: '100%',
            height: 50,
            background: 'white',
            zIndex: 99,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            padding: '0 10px'
          }}>
            <Checkbox checked={totalState} onChange={(checked) => dispatch(totalSwitchState(checked))}>全选</Checkbox>
            <Button type="danger" square onClick={() => {
              Dialog.confirm({
                title: '警告',
                message: '确认要删除所选数据嘛？'
              }).then(() => {
                dispatch(deleteSelectedCartList())
              }).catch(() => { })
            }}>删除所选</Button>
          </div>)
          : <SubmitBar
            price={totalPrice * 100}
            buttonText="提交订单"
            onSubmit={() => {
              navigate('/order', {
                state: {
                  totalPrice,
                }
              })
            }}
          >
            <Checkbox checked={totalState} onChange={(checked) => dispatch(totalSwitchState(checked))}>全选</Checkbox>
          </SubmitBar>
      }
    </div>
  )
}


export default Cart